<template>
  <view class="flex-v bg-white h-100vh">
    <view class="flex-1 flex-ca">
      <view v-if="status === 0" class="">
        <image class="logo" src="@/static/img/logo.png" mode="widthFix" />
        <button class="login-btn flex-ca" type="primary" hover-class="btn-hover" @click="wxLogin">
          <view class="iconfont icon-weixin" />
          <view class="">微 信 登 录</view>
        </button>
        <button class="login-btn flex-ca" type="primary" hover-class="btn-hover" @click="status = 1">
          <view class="iconfont icon-shouji" />
          <view class="">手 机 登 录</view>
        </button>
      </view>
      <view v-else-if="status === 1" class="">
        <image class="logo" src="@/static/img/logo.png" mode="widthFix" />
        <view class="input-cell">
          <input v-model="phone" class="input-flx" type="tel" maxlength="11" placeholder="请输入手机号">
        </view>
        <view class="input-cell">
          <input v-model="code" class="input-flx" type="tel" maxlength="6" placeholder="请输入短信验证码">
          <view v-if="countdown" class="text-primary">{{ countdown }}秒后重发</view>
          <view v-else class="input-code" :class="$f.isMobile(phone) ? 'text-primary' : 'text-info'" @click="getCode(0)">获取验证码</view>
        </view>
        <button class="login-btn flex-ca mb-small" :disabled="disabled" type="primary" hover-class="hover" @click="phoneLogin">
          <view class="">登 录</view>
        </button>
        <view class="text-right">
          <text class="text-green" hover-class="hover" @click="wxLogin">微信登录</text>
        </view>
      </view>
    </view>

    <view class="flex-ca leading-20 py-40">
      <view class="iconfont icon-squarfillecheck text-primary text-16 mr-5" />
      <view class="text-info text-12">
        我已阅读并同意<text class="text-primary">《服务协议》</text>和<text class="text-primary">
          《隐私政策》
        </text>
      </view>
    </view>
		
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog
        type="error"
        cancel-text="取消"
        confirm-text="微信登录"
        title="提示"
        content="该手机号暂未绑定，请先用微信登录后至个人中心绑定，方可使用手机号登录!"
        @confirm="dialogConfirm"
      />
    </uni-popup>
  </view>
</template>

<script>
import { APPID } from '@/env.js'
export default {
  data() {
    return {
      status: 0,
      phone: '',
      code: '',
      md5: '',
      // phone: '13560404297',
      // code: '9026',
      // md5: '2de5edea63faf77b544f06091e1e5f6d',
      timer: null,
      countdown: 0
    }
  },
  computed: {
    disabled() {
      return !this.$f.isMobile(this.phone) || this.code.length < 4
    }
  },
  onLoad() {
    // let pages = getCurrentPages() // 当前页面路由
    // console.log(pages[pages.length - 2].$page.fullPath)
  },
  methods: {
    dialogConfirm() {
			
    },
    wxLogin() {
      let pages = getCurrentPages() // 当前页面路由
      if (pages.length >= 2) {
        const fullPath = pages[pages.length - 2].$page.fullPath
        this.$f.cache('redirectPath', fullPath)
      }
      const url = window.location.href.split('#')[0]
      let redirectUri = this.$f.delUrlParam(url, ['code', 'state', 'reduri'])
			
      // snsapi_userinfo=高级授权； snsapi_base=静默授权
      let scope = 'snsapi_userinfo'
      let wxRedirectState = this.$f.randomStr(4)
      this.$f.cache('wxRedirectState', wxRedirectState)
      // 平台用的是公共域名，无需跳转APP_HOST下授权
      let authorUrl =
      `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${APPID}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=code&scope=${scope}&state=${wxRedirectState}#wechat_redirect`
      // 重定向到微信授权
      window.location.replace(authorUrl)
    },
    phoneLogin() {
      if (!this.md5) {
        return this.$f.toast('请先获取验证码')
      }
      if (!this.disabled) {
        this.$f.post('common/phoneLogin', { phone: this.phone, code: this.code, md5: this.md5 }).then(res => {
          if (res.code === 0) {
            this.$f.storeToken(res.data.token)
            this.$f.tips({ title: res.msg || '登录成功' }, { tab: 3 })
          } else {
            this.$f.toast(res.msg || '登录失败')
          }
        })
      }
    },
    getCode(type = 0) {
      if (!this.$f.isMobile(this.phone)) {
        return this.$f.toast('请输入有效的手机号')
      }
      // {"data": { "md5": "2de5edea63faf77b544f06091e1e5f6d" }, "code": 0 }
      // 9026
      this.$f.post('common/sms', {
        type,	// 0 登录 1 绑定手机号
        phone: this.phone
      }).then(res => {
        if (res.code === 0) {
          this.md5 = res.data.md5
          this.setTimer()
          this.$f.toast('发送成功')
        } else if (res.code === 1) {
          if (type === 0 && res.data.is_ban_wx === 0) {
            this.$refs.alertDialog.open()
          } else {
            this.$f.toast(res.msg)
          }
        }
      })
    },
    clearTimer() {
      if (this.timer)
        clearInterval(this.timer)
    },
    setTimer() {
      this.countdown = 60
      this.timer = setInterval(() => {
        this.countdown -= 1
        if (this.countdown === 0)
          this.clearTimer()
      }, 1000)
    }
  }
}
</script>

<style lang="scss">
	.text-green {
		font-size: 32rpx;
		color: #07c160;
		padding-bottom: 2rpx;
		border-bottom: 1rpx solid #07c160;
	}
	.logo {
		display: block;
		width: 310rpx;
		height: 100rpx;
		margin: 0 auto 100rpx;
	}

	.login-btn {
		height: 96rpx;
		border-radius: 96rpx;
		width: 640rpx;
		font-size: 36rpx;
		color: #fff;
		background-color: $uni-primary;
		box-shadow: 0 10rpx 30rpx #95C4FF;
		margin-bottom: 80rpx;

		.iconfont {
			font-size: 40rpx;
			margin-right: 20rpx;
		}
		
		&.mb-small {
			margin-bottom: 30rpx;
		}
	}

	.btn-hover {
		opacity: .8;
		background-color: $uni-primary;
	}

	.bind-title {
		font-size: 56rpx;
		margin-bottom: 80rpx;
	}

	.input-cell {
		display: flex;
		align-items: center;
		width: 640rpx;
		height: 96rpx;
		line-height: 48rpx;
		font-size: 32rpx;
		padding: 24rpx 48rpx;
		margin-bottom: 80rpx;
		border-radius: 96rpx;
		box-sizing: border-box;
		background-color: #F2F2F2;

		.input-flx {
			flex: 1;
		}
		.input-code {
			margin-left: 20rpx;
		}
	}
</style>
